<template>
	<view class="page">
		<view class="flex benben-position-layout flex flex-wrap align-center personalInformation_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub personalInformation_fd0_0'>
				<view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
					<text class='fu-iconfont2  personalInformation_fd0_0_c0_c0' @tap.stop="handleJumpDiy"
						data-type="back" data-url="1">&#xE794;</text>
				</view>
				<text class='personalInformation_fd0_0_c1'>会员订单</text>
				<view class='flex flex-wrap align-center personalInformation_fd0_0_c2'>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<!-- <u-sticky :offset-top="88+StatusBarRpx">
			<u-tabs :list="tabList" active-color="#1A66FA" :active-item-style="activeStyle" :is-scroll="false" :current="current" @change="change"></u-tabs>
			<view class="search_view flex align-center justify-between">
				<view class="search_input flex align-center">
					<image :src='STATIC_URL+"451.png"' mode="aspectFill"></image>
					<input v-model="keyword" @confirm="getSearch" class="input" type="text" placeholder="请输入关键词搜索..." placeholder-style="font-size:30rpx;color:#999;">
				</view>
				<view class="add_btn flex align-center justify-center" @tap.stop="screenShow=true">
					<text>筛选</text>
				</view>
			</view>
		</u-sticky> -->
		<view class="loading_css" v-if="isShow">
			<u-loading size="36" color="#1A66FA"></u-loading>
			<view>加载中</view>
		</view>
		<template v-else>
			<view class="order_list">
				<view class="order_item" v-for="(item, index) in list" :key="index" @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/order/details?order_id=` + item.id">
					<view class="order_date flex align-center">
						<view class="date_le">
							<view class="date_le_1"></view>
							<view class="date_le_2"></view>
						</view>
						<view class="date_ri">{{((item.create_at).slice(5, 10)).replace('-', '月') + '日'}}</view>
					</view>
					<view class="item_info">
						<view class="card_no flex align-center">
							<text>{{item.car_number}}</text>
							<image v-if="item.from == 1" class="order_source" :src='STATIC_URL+"460.png"' mode="aspectFill"></image>
							<view class="housekeep flex align-center justify-center" v-if="item.from == 2">
								<text class="housekeep_text">管家</text>
							</view>
							<image v-if="item.from == 4" class="order_source" :src='STATIC_URL+"462.png"' mode="aspectFill"></image>
							<image v-if="item.from == 5" class="order_source" style="width: 110rpx;" :src='STATIC_URL+"463.png"' mode="aspectFill"></image>
							<view class="housekeep_ks flex align-center justify-center" v-if="item.from == 6">
								<text class="housekeep_text">快手</text>
							</view>
							
							<image v-if="item.status == 2 && item.contract == 0" class="order_source" :src='STATIC_URL+"464.png"' mode="aspectFill"></image>
							<image v-if="item.risk == 1" class="order_source" :src='STATIC_URL+"494.png"' mode="aspectFill"></image>
							<view class="order_source_timeout flex align-center justify-center" v-if="item.status == 3 && item.repay_overtime == 1">
								<text class="order_source_timeout_text">超时</text>
							</view>
							<view class="violation flex align-center justify-center" v-if="item.vio_status !== null">
								<text class="violation_text">违章</text>
							</view>
						</view>
						<view class="label_list">
							<!-- <view class="label_item flex align-center justify-center">{{item.gearbox}}</view>
							<view class="label_item flex align-center justify-center">{{item.category_name}}</view>
							<view class="label_item flex align-center justify-center">{{item.power}}</view>
							<view class="label_item flex align-center justify-center">{{item.model}}</view> -->
							<view class="label_item flex align-center justify-center">{{item.name}}</view>
							
						</view>
						<view class="order_news">
							<view class="order_news_text flex align-center" v-if="item.status != 4">
								<image :src='STATIC_URL+"491.png"' mode="aspectFill"></image>
								<view class="order_news_text_1" v-if="item.status == 2 || item.status == 5">取车时间：{{item.take_at}}</view>
								<view class="order_news_text_1" v-else>还车时间：{{item.repay_at}}</view>
							</view>
							<view class="order_news_text flex align-center" v-if="item.door_to_door == 1" @tap.stop="openLocationInfo(item.store_lat, item.store_lng, item.store_name)">
								<image :src='STATIC_URL+"492.png"' mode="aspectFill"></image>
								<view class="order_news_text_1">取车地址：{{item.store_name}}</view>
							</view>
							<view class="order_news_text flex align-center" v-if="item.door_to_door == 2" @tap.stop="openLocationInfo(item.lat, item.lng, item.address)">
								<image :src='STATIC_URL+"492.png"' mode="aspectFill"></image>
								<view class="order_news_text_2">送车地址：{{item.address}}</view>
								<image class="door_img" :src='STATIC_URL+"16.png"' mode="aspectFill"></image>
							</view>
							<view class="order_news_text flex align-center">
								<image :src='STATIC_URL+"493.png"' mode="aspectFill"></image>
								<view class="order_news_text_1">租客：{{item.username}} {{item.phone_no}}</view>
								<image @tap.stop="getPhone(item.phone_no)" class="order_phone" :src='STATIC_URL+"465.png"' mode="aspectFill"></image>
							</view>
						</view>
						<view class="order_price flex align-center justify-between">
							<view class="price_le flex align-center">
								<text class="price_le_1">总价：</text>
								<text class="price_le_2">¥</text>
								<text class="price_le_3">{{ Number(item.money) }}</text>
								<!-- <text class="price_le_3">{{ item.origin_money | frontPrice }}</text>
								<text class="price_le_4">{{ item.origin_money | laterPrice }}</text> -->
							</view>
							<view class="price_ri" v-if="item.status != 5">
								<text class="price_ri_1" v-if="item.status == 2 || item.status == 3 || item.status == 4 ">已付：</text>
								<text class="price_ri_1" v-else>应付：</text>
								
								<template v-if="item.status == 2 || item.status == 3 || item.status == 4 ">
									<template v-if="item.all_items_has_pay == 0">
										<text class="price_ri_2">¥</text>
										<text class="price_ri_3">{{ item.money - item.unpay_money }}</text>
										<!-- <text class="price_ri_3">{{ item.money - item.unpay_money | frontPrice }}</text>
										<text class="price_ri_4">{{ item.money - item.unpay_money | laterPrice }}</text> -->
									</template>
									<template v-else>
										<text class="price_ri_2">¥</text>
										<text class="price_ri_3">{{ Number(item.money) }}</text>
										<!-- <text class="price_ri_3">{{ item.origin_money | frontPrice }}</text>
										<text class="price_ri_4">{{ item.origin_money | laterPrice }}</text> -->
									</template>
								</template>
								<template v-else>
									<text class="price_ri_2">¥</text>
									<text class="price_ri_3">{{  Number(item.money) }}</text>
									<!-- <text class="price_ri_3">{{ item.origin_money | frontPrice }}</text>
									<text class="price_ri_4">{{ item.origin_money | laterPrice }}</text> -->
								</template>
								
								<template v-if="item.all_items_has_pay == 0">
									<text class="price_ri_1" style="margin-left: 12rpx;">待付：</text>
									<text class="price_ri_2">¥</text>
									<text class="price_ri_3">{{ Number(item.unpay_money) }}</text>
									<!-- <text class="price_ri_3">{{ item.unpay_money | frontPrice }}</text>
									<text class="price_ri_4">{{ item.unpay_money | laterPrice }}</text> -->
								</template>
							</view>
						</view>
						<view class="operation" v-if="item.status == 1 || item.status == 2 || item.status == 3">
							<view v-if="item.status == 1 || item.status == 2 || item.status == 3" class="btn_1 flex align-center justify-center" @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/order/otherPrice?order_id=${item.id}&unpay_money=${item.unpay_money}`">收银台</view>
							<!-- <view v-if="item.status == 2 && item.contract == 0" class="btn_1 flex align-center justify-center" @tap.stop="signContract(item.is_auth, item.user_id)">签署合同</view> -->
							<view v-if="item.status == 2  && item.is_check_car == 0" class="btn_3 flex align-center justify-center" @tap.stop="chechCar(1, item.id, index)">发车验车</view>
							<view v-if="item.status == 2  && item.is_check_car == 1" class="btn_3 flex align-center justify-center" @tap.stop="getDispatchCar(item.id)">发车</view>
							<view v-if="item.status == 3  && item.is_check_car == 1" class="btn_3 flex align-center justify-center" @tap.stop="chechCar(2, item.id, index)">收车验车</view>
							<view v-if="item.status == 3  && item.is_check_car == 2" class="btn_3 flex align-center justify-center" @tap.stop="postcollectCar(item.id, item.unpay_money)">收车</view>
						</view>
						<view class="order_status_1 flex align-center justify-center" v-if="item.status == 2">待发车</view>
						<view class="order_status_2 flex align-center justify-center" v-if="item.status == 3">待收车</view>
						<view class="order_status_3 flex align-center justify-center" v-if="item.status == 4">已完成</view>
						<view class="order_status_4 flex align-center justify-center" v-if="item.status == 5">已取消</view>
						<view class="order_status_5 flex align-center justify-center" v-if="item.status == 1">待付款</view>
					</view>
				</view>
				<view class="loadmore" v-if="last_page > 1">
					<u-loadmore font-size="24" :status="status" :icon-type="iconType" :load-text="loadText" />
				</view>
			</view>
			<view class="noData" v-if="list.length == 0 && !isShow">
				<image :src='STATIC_URL+"no.png"'></image>
			</view>
			
			<!-- <image @tap.stop="createOrder" class="add_img" :src='STATIC_URL+"458.png"' mode="aspectFill"></image> -->
		</template>
		
		<u-popup v-model="screenShow" mode="bottom" border-radius="28" z-index="99">
			<view class="screen_popup">
				<view class="screen_title flex align-center justify-between">
					<view class="">筛选</view>
					<u-icon name="close" color="#cccccc" size="30" @click="screenShow=false"></u-icon>
				</view>
				<view class="second_title">下单时间</view>
				<view class="screen_list">
					<view class="screen_item flex align-center justify-center" v-for="(v, k) in orderTime" :key="k" :class="near_time == v.id ? 'active_item' : ''" @tap.stop="selectTime(v.id)">{{v.name}}</view>
				</view>
				<view class="screen_date flex align-center">
					<image class="date_icon" :src='STATIC_URL+"459.png"' mode="aspectFill"></image>
					<view class="date_content flex align-center">
						<text @tap.stop="selectDay(1)">
							<text v-if="!time_start">开始日期</text>
							<text v-else>{{time_start}}</text>
						</text>
						<text class="date_content_line">-</text>
						<text @tap.stop="selectDay(2)">
							<text v-if="!time_end">结束日期</text>
							<text v-else>{{time_end}}</text>
						</text>
					</view>
				</view>
				<!-- <view class="second_title">订单来源</view>
				<view class="screen_list">
					<view class="screen_item flex align-center justify-center active_item">近一周</view>
					<view class="screen_item flex align-center justify-center">近一月</view>
				</view> -->
				<view class="picker_btn flex align-center justify-between">
					<view class="picker_btn_1 flex align-center justify-center" @tap.stop="resultScreen">重置</view>
					<view class="picker_btn_2 flex align-center justify-center" @tap.stop="confirmScreen">确定</view>
				</view>
			</view>
		</u-popup>
		
		<benben-picker ref="benbenWritePickerCodepicker2" :visible.sync="pickerDiy1658997072074"
			:value.sync='date' endYear="现在" fields="day" mode='date' :mask-show='true' :timeout='true' :picker-height='100' default-type='value' @change="changeDay">
			<template #picker-header>
				<view class='flex flex-wrap align-center justify-between personalInformation_picker2_0'>
					<view class="personalInformation_picker2_0_c1">选择时间</view>
					<u-icon @tap="$refs.benbenWritePickerCodepicker2.cancel()" name="close" color="#CCCCCC"></u-icon>
				</view>
			</template>
			<template #picker-footer>
				<view class="bill_picker_btn flex align-center justify-between">
					<view class="bill_picker_btn_1 flex align-center justify-center" @tap="$refs.benbenWritePickerCodepicker2.cancel()">取消</view>
					<view class="bill_picker_btn_2 flex align-center justify-center" @tap="$refs.benbenWritePickerCodepicker2.pickerConfirm()">确定</view>
				</view>
			</template>
		</benben-picker>
		
		<u-mask :show="codeShow" @click="codeShow = false">
			<view class="warp">
				<view class="rect" @tap.stop="">
					<view class="free_code">
						<view class="code_view">
							<view class="qrcode_img">
								<image :src='STATIC_URL+"447.png"' mode="aspectFill"></image>
							</view>
							<view class="qrcode_text">扫码签署合同</view>
						</view>
						<!-- <view class="operation_btn flex align-center justify-between">
							<view class="operation_1">分享用户</view>
							<view class="operation_2">下载该码</view>
						</view> -->
					</view>
				</view>
			</view>
		</u-mask>
		
		<u-popup v-model="popupShow1698293086456" border-radius="24" :mask="true" :mask-close-able="true" mode='center'>
			<!---删除历史记录弹窗flex布局开始-->
			<view class="flex flex-direction flex-wrap align-center search_flex_2">
				<text class='search_fd2_0'>提示</text>
				<text class='search_fd2_1'>请确认车辆押金是否已付？</text>
				<view class='flex flex-wrap align-center search_fd2_2'>
					<view class='search_fd2_2_c0 flex align-center justify-center' @tap.stop="popupShow1698293086456=false">取消</view>
					<view class='search_fd2_2_c1 flex align-center justify-center' @tap.stop="confirmFache()">确认</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import UploadImage from '@/common/utils/upload-image.js'
	import {
		validate
	} from '@/common/utils/validate.js'
	export default {
		components: {},

		data() {
			return {
				pickerDiy1658997072074: false,
				popupShow1698293086456: false,
				keyword: "",
				tabList: [{
					name: '全部',
					id: 0
				}, {
					name: '预定',
					id: 2
				}, {
					name: '在租',
					id: 3
				}, {
					name: '结算',
					id: 4
				}, {
					name: '取消',
					id: 5
				}],
				current: 0,
				activeStyle: {
					'color': '#222222',
					'fontSize': '34rpx'
				},
				screenShow: false,
				orderTime: [
					{
						name: '近一周',
						id: 1
					},
					{
						name: '近一月',
						id: 2
					},
					{
						name: '近三月',
						id: 3
					}
				],
				near_time: "",
				time_range: "",
				time_start: "",
				time_end: "",
				date: "",
				day_type: "",
				codeShow: false,
				order_id: "",
				"list": [],
				"page": 1,
				"is_pull": true,
				"last_page": 1,
				"status": 'loadmore',
				"iconType": 'flower',
				"loadText": {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '我也是有底线的'
				},
				"isShow": true,
				
				user_id: ""
			};
		},
		computed: {

		},
		watch: {},
		onLoad(options) {
			let { user_id } = options;
			if (user_id !== undefined) this.user_id = user_id;
			this.page = 1;
			this.is_pull = true;
			this.isShow = true;
			this.getOrder();
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {
			// if (global.token) {
			// 	this.page = 1;
			// 	this.is_pull = true;
			// 	this.isShow = true;
			// 	this.getOrder();
			// } else {
			// 	this.isShow = false;
			// }
		},
		onHide() {

		},
		onResize() {

		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1;
			this.is_pull = true;
			this.isShow = true;
			this.getOrder();
		},
		// 上拉加载
		onReachBottom() {
			if (this.page >= this.last_page) return;
			this.status = 'loading';
			this.page++;
			setTimeout(() => {
		
				if (this.page >= this.last_page) this.status = 'nomore';
				else this.status = 'loading';
				this.is_pull = false;
				this.getOrder();
			}, 500)
		},
		onPageScroll(e) {

		},
		methods: {
			change(index) {
				this.current = index;
				this.page = 1;
				this.is_pull = true;
				this.isShow = true;
				this.getOrder();
			},
			// 获取订单列表 postOrderList
			getOrder() {
				this.$api.post(global.apiUrls.postUserOrder, {
					// keyword: this.keyword,
					// status: this.tabList[this.current].id,
					// store_id: global.userInfo.store_id,
					// near_time: this.near_time,
					// time_range: this.time_range,
					user_id: this.user_id,
					page: this.page,
					rows: 10
				}).then(res => {
					// console.log(res);
					uni.stopPullDownRefresh();
					this.isShow = false;
					if (res.data.code == 1) {
						this.last_page = res.data.data.totalPage;
						if (this.is_pull) {
							this.list = res.data.data.items;
						} else {
							this.list = this.list.concat(res.data.data.items);
						}
					} else {
						this.$message.info(res.data.info);
					}
				})
			},
			// 搜索
			getSearch() {
				this.page = 1;
				this.is_pull = true;
				this.isShow = true;
				this.getOrder();
			},
			// 筛选
			selectTime(id) {
				this.near_time = id;
			},
			selectDay(type) {
				if (type == 2) {
					if (!this.time_start) {
						this.$message.info('请选择开始时间');
						return;
					}
				}
				this.day_type = type;
				this.pickerDiy1658997072074 = true;
			},
			changeDay(e) {
				if (this.day_type == 1) {
					this.time_start = e.value;
				} else if (this.day_type == 2) {
					this.time_end = e.value;
				}
			},
			// 确认筛选
			confirmScreen() {
				if (this.time_start) {
					if (!this.time_end) {
						this.$message.info('请选择结束时间');
						return;
					}
					if (this.compareDates(this.time_start, this.time_end) > 0) {
						this.$message.info('开始时间不能大于结束时间');
						return;
					}
					this.time_range = this.time_start + '|' + this.time_end;
				}
				
				this.screenShow = false;
				this.page = 1;
				this.is_pull = true;
				this.isShow = true;
				this.getOrder();
			},
			compareDates(date1, date2) {
			  return new Date(date1).getTime() - new Date(date2).getTime();
			},
			// 重置筛选
			resultScreen() {
				this.time_start = "";
				this.time_end = "";
				this.time_range = "";
				this.date = "";
				this.day_type = "";
				this.near_time = "";
				this.screenShow = false;
				this.page = 1;
				this.is_pull = true;
				this.isShow = true;
				this.getOrder();
			},
			// 拨打电话
			getPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			},
			// 签署合同
			signContract(is_auth, user_id) {
				if (is_auth == 1) {
					this.codeShow = true;
				} else {
					this.$message.info('请完善会员资料');
					uni.navigateTo({
						url: '/pages/my/personalInformation/personalInformation?user_id=' + user_id
					})
				}
			},
			// 验车
			chechCar(type, order_id, index) {
				if (this.list[index].is_auth == 1) {
					uni.navigateTo({
						url: '/pages/order/inspection?type=' + type + '&order_id=' + order_id
					})
				} else {
					this.$message.info('请完善会员资料');
					uni.navigateTo({
						url: '/pages/my/personalInformation/personalInformation?user_id=' + this.list[index].user_id
					})
				}
			},
			// 管家发车  dispatchCar
			getDispatchCar(order_id) {
				this.popupShow1698293086456 = true;
				this.order_id = order_id;
			},
			confirmFache() {
				this.popupShow1698293086456 = false;
				this.$api.post(global.apiUrls.dispatchCar, {
					order_id: this.order_id
				}).then(res => {
					this.$message.info(res.data.info);
					if (res.data.code == 1) {
						this.page = 1;
						this.is_pull = true;
						this.isShow = true;
						this.getOrder();
					}
				})
			},
			// 管家收车  collectsCar
			postcollectCar(order_id, unpay_money) {
				if (unpay_money > 0) {
					this.$message.info('订单有未支付金额,请支付后收车');
					return;
				}
				this.$api.post(global.apiUrls.collectsCar, {
					order_id: order_id
				}).then(res => {
					this.$message.info(res.data.info);
					if (res.data.code == 1) {
						this.page = 1;
						this.is_pull = true;
						this.isShow = true;
						this.getOrder();
					}
				})
			},
			// 创建订单
			createOrder() {
				if (global.token) {
					// if (global.userInfo.role == 1) {
					// 	this.$message.info('请切换为门店管理员');
					// 	return;
					// }
					uni.navigateTo({
						url: '/pages/index/memberList/memberList?type=1'
					})
				} else {
					uni.navigateTo({
						url: '/pages/tabBar/login/login'
					})
				}
				
			},
			// 打开地图
			openLocationInfo(lat, lon, addressName) {
				uni.openLocation({
					name: addressName,
					address: addressName,
					latitude: Number(lat),
					longitude: Number(lon),
					success: function() {
						console.log('success');
					},
					fail: function(err) {
						console.log(err);
					}
				});
			},
		}
	};
</script>
<style lang="scss" scoped>
	.free_code {
		width: 530rpx;
		border-radius: 28rpx;
	
		.free_title_img {
			width: 116rpx;
			height: 116rpx;
			margin: -40rpx auto 8rpx;
	
			image {
				width: 100%;
				height: 100%;
			}
		}
	
		.free_store {
			text-align: center;
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
		}
	
		.input_content {
			width: 534rpx;
			height: 96rpx;
			background: #F6F7FB;
			border-radius: 16rpx;
			margin: 32rpx auto;
			padding: 0 32rpx;
	
			.input_1 {
				font-weight: bold;
				font-size: 36rpx;
				color: #222222;
			}
	
			.input_2 {
				flex: 1;
				margin: 0 24rpx;
				font-size: 32rpx;
			}
	
			.input_3 {
				width: 32rpx;
				height: 32rpx;
			}
		}
	
		.code_view {
			text-align: center;
	
			.qrcode_img {
				margin: 0 auto;
				width: 352rpx;
				height: 352rpx;
	
				image {
					width: 100%;
					height: 100%;
				}
			}
	
			.qrcode_text {
				margin-top: 20rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
			}
		}
	
		.operation_btn {
			margin: 38rpx 0 0;
			padding: 0 40rpx;
	
			.operation_1 {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 172rpx;
				height: 64rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				border: 2rpx solid #EEEEEE;
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
			}
	
			.operation_2 {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 172rpx;
				height: 64rpx;
				background: #1A66FA;
				border-radius: 16rpx;
				border: 2rpx solid #1A66FA;
				font-weight: 400;
				font-size: 28rpx;
				color: #fff;
			}
		}
	}
	
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	
	.rect {
		width: 530rpx;
		background-color: #fff;
		border-radius: 28rpx;
		padding: 48rpx 0;
	}
	
	.order_list {
		padding: 24rpx 24rpx 0;
		.order_item {
			margin-bottom: 32rpx;
			.order_date {
				padding: 0 0 18rpx 38rpx;
				.date_le {
					display: flex;
					flex-direction: column;
					align-items: center;
					transform: translateY(16rpx);
					.date_le_1 {
						width: 10rpx;
						height: 10rpx;
						background: #1A66FA;
						border-radius: 50%;
					}
					.date_le_2 {
						width: 2rpx;
						height: 28rpx;
						background: #E2E4EA;
					}
				}
				.date_ri {
					margin-left: 14rpx;
					font-weight: bold;
					font-size: 30rpx;
					color: #222222;
				}
			}
			.item_info {
				border-radius: 16rpx;
				background: #fff;
				padding: 24rpx 24rpx 32rpx;
				position: relative;
				.card_no {
					font-weight: bold;
					font-size: 36rpx;
					color: #222222;
					margin-right: 8rpx;
				}
				.order_source {
					width: 90rpx;
					height: 40rpx;
					margin-left: 8rpx;
				}
				.order_source_timeout {
					margin-left: 8rpx;
					font-size: 22rpx;
					width: 90rpx;
					height: 40rpx;
					transform: skewX(-8deg);
					background: #ED4827;
					color: rgba(255, 255, 255, 0.7);
					font-weight: 400;
					border-radius: 9rpx;
					.order_source_timeout_text {
						transform: skewX(8deg);
					}
				}
				.violation {
					margin-left: 8rpx;
					font-size: 22rpx;
					width: 90rpx;
					height: 40rpx;
					transform: skewX(-8deg);
					background: red;
					color: rgba(255, 255, 255, 0.7);
					font-weight: 400;
					border-radius: 9rpx;
					.violation_text {
						transform: skewX(8deg);
					}
				}
				.housekeep {
					margin-left: 8rpx;
					font-size: 22rpx;
					width: 90rpx;
					height: 40rpx;
					transform: skewX(-8deg);
					background: #1A66FA;
					color: rgba(255, 255, 255, 0.7);
					font-weight: 400;
					border-radius: 9rpx;
					.housekeep_text {
						transform: skewX(8deg);
					}
				}
				.housekeep_ks {
					width: 90rpx;
					margin-left: 8rpx;
					font-size: 22rpx;
					height: 40rpx;
					transform: skewX(-8deg);
					background: #FF4906;
					color: rgba(255, 255, 255, 0.7);
					font-weight: 400;
					border-radius: 9rpx;
					.housekeep_text {
						transform: skewX(8deg);
					}
				}
				.label_list {
					margin-top: 14rpx;
					overflow: hidden;
					.label_item {
						float: left;
						padding: 4rpx 20rpx;
						margin: 0 12rpx 12rpx 0;
						background: #E9EEFF;
						border-radius: 8rpx;
						font-weight: 400;
						font-size: 22rpx;
						color: #1A66FA;
					}
				}
				.order_news {
					padding-bottom: 24rpx;
					border-bottom: 1px solid #eee;
					.order_news_text {
						margin-top: 16rpx;
						image {
							width: 50rpx;
							height: 48rpx;
							margin-right: 12rpx;
						}
						.order_news_text_1 {
							font-weight: 400;
							font-size: 28rpx;
							color: #222222;
						}
						.order_news_text_2 {
							flex: 1;
							font-weight: 400;
							font-size: 28rpx;
							color: #222222;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
						}
						.door_img {
							width: 120rpx;
							height: 40rpx;
							margin-right: 0;
						}
						.order_phone {
							width: 48rpx;
							height: 48rpx;
						}
					}
				}
				.order_price {
					padding: 24rpx 0 0;
					.price_le {
						.price_le_1 {
							font-size: 24rpx;
							color: #222222;
						}
						.price_le_2 {
							font-size: 24rpx;
							font-weight: bold;
							color: #FF532E;
						}
						.price_le_3 {
							font-size: 34rpx;
							font-weight: bold;
							color: #FF532E;
						}
						.price_le_4 {
							font-size: 24rpx;
							font-weight: bold;
							color: #FF532E;
						}
					}
					.price_ri {
						.price_ri_1 {
							font-size: 24rpx;
							color: #222222;
						}
						.price_ri_2 {
							font-size: 24rpx;
							font-weight: bold;
							color: #222222;
						}
						.price_ri_3 {
							font-size: 34rpx;
							font-weight: bold;
							color: #222222;
						}
						.price_ri_4 {
							font-size: 24rpx;
							font-weight: bold;
							color: #222222;
						}
					}
				}
				.operation {
					margin-top: 24rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					.btn_1 {
						width: 192rpx;
						height: 76rpx;
						background: #FFFFFF;
						border-radius: 16rpx;
						border: 2rpx solid #EEEEEE;
						font-weight: 400;
						font-size: 28rpx;
						color: #111111;
						margin-left: 20rpx;
					}
					.btn_3 {
						width: 192rpx;
						height: 76rpx;
						background: #1A66FA;
						border-radius: 16rpx;
						border: 2rpx solid #1A66FA;
						font-weight: 400;
						font-size: 28rpx;
						color: #fff;
						margin-left: 20rpx;
					}
				}
				.order_status_1 {
					width: 108rpx;
					height: 44rpx;
					background: #1A66FA;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					border-radius: 0 16rpx 0 16rpx;
					position: absolute;
					top: 0;
					right: 0;
				}
				.order_status_2 {
					width: 108rpx;
					height: 44rpx;
					background: #FF792E;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					border-radius: 0 16rpx 0 16rpx;
					position: absolute;
					top: 0;
					right: 0;
				}
				.order_status_3 {
					width: 108rpx;
					height: 44rpx;
					background: #00CAA5;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					border-radius: 0 16rpx 0 16rpx;
					position: absolute;
					top: 0;
					right: 0;
				}
				.order_status_4 {
					width: 108rpx;
					height: 44rpx;
					background: #C0C7D4;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					border-radius: 0 16rpx 0 16rpx;
					position: absolute;
					top: 0;
					right: 0;
				}
				.order_status_5 {
					width: 108rpx;
					height: 44rpx;
					background: red;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					border-radius: 0 16rpx 0 16rpx;
					position: absolute;
					top: 0;
					right: 0;
				}
			}
		}
	}
	.screen_popup {
		.screen_title {
			padding: 30rpx 30rpx 30rpx 30rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #222222;
			border-bottom: 1px solid #eee;
		}
		.second_title {
			padding: 0 30rpx;
			margin: 32rpx 0 24rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
		}
		.screen_list {
			overflow: hidden;
			padding: 0 30rpx;
			.screen_item {
				float: left;
				margin-right: 14rpx;
				margin-bottom: 16rpx;
				width: 220rpx;
				height: 80rpx;
				background: #F6F7FB;
				border-radius: 16rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
				border: 2px solid #F6F7FB;
			}
			.active_item {
				background: #F1F6FF;
				border: 2rpx solid #AAC7FF;
				color: #1A66FA;
			}
			.screen_item:nth-child(3n+3) {
				margin-right: 0;
			}
		}
		.screen_date {
			width: 692rpx;
			height: 80rpx;
			border-radius: 16rpx;
			border: 2rpx solid #EEEEEE;
			margin: 0 30rpx;
			padding-left: 46rpx;
			.date_icon {
				width: 40rpx;
				height: 40rpx;
			}
			.date_content {
				margin-left: 54rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				.date_content_line {
					margin: 0 86rpx;
				}
			}
		}
		.picker_btn {
			background: #fff;
			padding: 12rpx 30rpx 28rpx;
			margin: 100rpx 0;
			border-top: 1px solid #eee;
		}
		.picker_btn_1 {
			width: 236rpx;
			height: 96rpx;
			background: #F6F7FB;
			border-radius: 16rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #222222;
		}
		.picker_btn_2 {
			width: 436rpx;
			height: 96rpx;
			background: #1A66FA;
			border-radius: 16rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #fff;
		}
	}
	.search_view {
		background: #fff;
		padding: 10rpx 24rpx 24rpx;
		border-radius: 0 0 16rpx 16rpx;

		.search_input {
			width: 560rpx;
			height: 80rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			position: relative;
			padding: 0 24rpx 0 78rpx;
			border: 2rpx solid #EEEEEE;

			image {
				position: absolute;
				left: 28rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 25rpx;
				height: 25rpx;
			}

			.input {
				font-size: 30rpx;
			}
		}

		.add_btn {
			width: 126rpx;
			height: 80rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;
			border: 2rpx solid #EEEEEE;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}
		}
	}
	.add_img {
		width: 112rpx;
		height: 112rpx;
		position: fixed;
		bottom: 128rpx;
		right: 24rpx;
	}
	
	
	.search_flex_2 {
		background: #fff;
		// margin: 0rpx 105rpx 0rpx 105rpx;
		border-radius: 25rpx 25rpx 25rpx 25rpx;
		padding: 40rpx 0rpx 0rpx 0rpx;
	}
	
	.search_fd2_2_c1 {
		background: transparent;
		line-height: 90rpx;
		border-radius: 0rpx 0rpx 16rpx 0rpx;
		font-size: 32rpx;
		color: #1A66FA;
		width: 269rpx;
		height: 90rpx;
	}
	
	.search_fd2_2_c0 {
		border-right: 1px solid #EEEEEE;
		background: transparent;
		line-height: 90rpx;
		border-radius: 0rpx 0rpx 0rpx 16rpx;
		font-size: 32rpx;
		color: #999;
		height: 90rpx;
		width: 270rpx;
	}
	
	.search_fd2_2 {
		border-top: 1px solid #eee;
	}
	
	.search_fd2_1 {
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		margin: 48rpx 0rpx 60rpx 0rpx;
	}
	
	.search_fd2_0 {
		color: #333333;
		font-size: 36rpx;
		font-weight: 500;
		line-height: 45rpx;
	}
	.personalInformation_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: #111;
	}

	.personalInformation_picker2_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		padding: 40rpx 30rpx 30rpx 30rpx;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
	}
	
	.personalInformation_picker2_0_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #BFBFBF;
	}
	
	.personalInformation_picker2_0_c1 {
		font-weight: bold;
		font-size: 34rpx;
		color: #000000;
	}
	.bill_picker_btn {
		background: #fff;
		padding: 12rpx 30rpx 28rpx;
	}
	.bill_picker_btn_1 {
		width: 236rpx;
		height: 96rpx;
		background: #F6F7FB;
		border-radius: 16rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #222222;
	}
	.bill_picker_btn_2 {
		width: 436rpx;
		height: 96rpx;
		background: #1A66FA;
		border-radius: 16rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #fff;
	}

	.personalInformation_fd1_0 {
		// margin-top: 32rpx;
		height: 96rpx;
		border-top: 1px solid #eee;
	}

	.personalInformation_fd1_0_c0 {
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.6);
	}

	.personalInformation_fd1_0_c1_image {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
	}

	.personalInformation_fd1_1 {
		border-bottom: 1px solid #eee;
		height: 109rpx;
	}

	.personalInformation_fd1_1_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.personalInformation_fd1_1_c1 {
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
		text-align: right;
		margin: 0rpx 0rpx 0rpx 24rpx;
	}

	.personalInformation_fd1_2 {
		border-bottom: 1px solid #eee;
		height: 109rpx;
	}

	.personalInformation_fd1_2_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.personalInformation_fd1_2_c1 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333;
		text-align: right;
		margin: 0rpx 0rpx 0rpx 24rpx;
	}

	.personalInformation_fd1_3 {
		border-bottom: 1px solid #eee;
		height: 109rpx;
	}

	.personalInformation_fd1_3_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.personalInformation_fd1_3_c1 {
		font-weight: 500;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.8);
	}

	.personalInformation_flex_1 {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx 24rpx 0rpx 24rpx;
		margin: 16rpx 24rpx 0;
	}

	.personalInformation_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		height: 88rpx;
	}

	.personalInformation_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: #111;
	}

	.personalInformation_fd0_0_c1 {
		font-size: 32rpx;
		font-weight: bold;
		color: #111111;
	}

	.personalInformation_fd0_0_c2 {
		width: 36rpx;
		height: 36rpx;
	}

	.personalInformation_flex_0 {
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background: #fff;
		background-size: 100% auto !important;
	}

	.page {
		min-height: calc(100vh - var(--window-bottom));
		background: #f6f7fb;
		background-size: 100% auto !important;
	}
</style>